<template>
    <div class="listDiv pd10">
        <div class="searchDiv">
            <el-form class="searchLeft" ref="serform" :model="obj.req" label-position="top">
                <el-form-item class="serlabelB mr20" label="姓名/手机：" prop="key">
                    <el-input v-model="obj.req.key" placeholder="请输入姓名/手机" class="search_key" clearable />
                </el-form-item>
                <!-- <el-form-item class="serlabelB mr20" label="身份：" prop="type_user">
                    <el-select v-model="obj.req.type_user" placeholder="请选择身份" style="width: 100px;" clearable>
                        <el-option v-for="(item,index) in proxy.$setting.globalData.type_userTypeAry" :key="index" :label="item.text" :value="item.id" />
                    </el-select>
                </el-form-item> -->
                <el-form-item class="serlabelB mr20" label="业务身份：" prop="type_identity">
                    <el-select v-model="obj.req.type_identity" placeholder="请选择业务身份" style="width: 100px;" clearable :empty-values="[null, undefined]">
                        <el-option v-for="(item,index) in proxy.$setting.globalData.type_identitySerTypeAry" :key="index" :label="item.text" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="serlabelB mr20" label="审核状态：" prop="verify">
                    <el-select v-model="obj.req.verify" placeholder="请选择审核状态" style="width: 100px;">
                        <el-option v-for="(item,index) in proxy.$setting.globalData.verifyTypeAry" :key="index" :label="item.text" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="mr20">
                    <el-button type="primary" @click="obj.req.currentpage=1;init()">查询</el-button>
                    <el-button plain @click="proxy.$refs['serform'].resetFields();init()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="obj.ary" style="width: 100%;flex: 1;"
            :header-cell-style="{ background: '#E5E6EB', color: '#333333' }">
            <el-table-column prop="name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="120"></el-table-column>
            <el-table-column prop="type_user" label="身份" width="60">
                <template #default="scope">
                    <span>{{scope.row.type_user==1?'个人':'企业'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type_identity" label="业务身份" width="100"></el-table-column>
            <el-table-column prop="company" label="企业名称"></el-table-column>
            <el-table-column prop="verifyText" label="审核状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.verifyType">{{ scope.row.verifyText }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="verify_msg" label="审核拒绝原因"></el-table-column>
            <el-table-column prop="verify_time" label="审核时间" width="180"></el-table-column>
            <el-table-column prop="intime" label="注册时间" width="180"></el-table-column>
            <el-table-column prop="loginnum" label="登录次数" width="80"></el-table-column>
            <el-table-column prop="height" label="操作" width="100">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="showVerify(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex-center mt10">
            <el-pagination
                background
                size="small"
                @size-change="init()"
                @current-change="init()"
                v-model:current-page="obj.req.currentpage"
                :page-sizes="[10, 20, 50, 100]"
                v-model:page-size="obj.req.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="obj.req.count">
                </el-pagination>
        </div>

        <el-dialog v-model="obj.dialog.show" :title="obj.dialog.title" width="600px" :close-on-click-modal="false" destroy-on-close>
            <el-form ref="verifyForm" :model="obj.dialog.verifyForm" label-width="80px" class="mb10">
                <el-form-item label="审核结果" prop="verify" :rules="[formRulesMixin.notNull]">
                    <el-select v-model="obj.dialog.verifyForm.verify" placeholder="请选择审核状态">
                        <template v-for="(item,index) in proxy.$setting.globalData.verifyTypeAry" :key="index">
                            <el-option v-if="item.id!=0" :label="item.text_" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="obj.dialog.verifyForm.verify==2" label="拒绝原因" prop="verify_msg" :rules="[formRulesMixin.notNull]">
                    <el-input v-model="obj.dialog.verifyForm.verify_msg" type="textarea" placeholder="请输入拒绝原因" maxlength="50" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="obj.dialog.show=false">取消</el-button>
                    <el-button type="primary" @click="submitVerify">提交</el-button>
                </el-form-item>
            </el-form>
            <el-descriptions title="用户详细信息" :column="2" size="small" border>
                <el-descriptions-item label="姓名">{{obj.user.name}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{obj.user.mobile}}</el-descriptions-item>
                <el-descriptions-item label="openid">{{obj.user.openid}}</el-descriptions-item>
                <el-descriptions-item label="业务身份">{{obj.user.type_identity}}</el-descriptions-item>
                <el-descriptions-item label="身份">{{obj.user.type_user==1?'个人':'企业'}}</el-descriptions-item>
                <el-descriptions-item label="企业名称">{{obj.user.company}}</el-descriptions-item>
                <el-descriptions-item label="联系地址">
                    <div class="flex-row">
                        <span>{{obj.user.location}}</span>
                        <baiduMap v-if="obj.user.addressInfo.longitude&&obj.user.addressInfo.latitude" buttonText="查看" :isChoose="false" buttonSize="small" :address="obj.user.addressInfo" />
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="营业执照">
                    <el-image :src="obj.user.business_license" :preview-src-list="[obj.user.business_license]" fit="cover" style="width: 60px; height: 60px" />
                </el-descriptions-item>
                <el-descriptions-item label="名片">
                    <el-image :src="obj.user.business_card" :preview-src-list="[obj.user.business_card]" fit="cover" style="width: 60px; height: 60px" />
                </el-descriptions-item>
                <el-descriptions-item label="其他材料">
                    <el-image :src="obj.user.business_other" :preview-src-list="[obj.user.business_other]" fit="cover" style="width: 60px; height: 60px" />
                </el-descriptions-item>
                <el-descriptions-item label="最后登录时间">{{obj.user.lastlogintime}}</el-descriptions-item>
                <el-descriptions-item label="登录次数">{{obj.user.loginnum}}</el-descriptions-item>
                <el-descriptions-item label="审核状态">
                    <el-tag :type="obj.user.verifyType">{{ obj.user.verifyText }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="审核拒绝原因">{{obj.user.verify_msg}}</el-descriptions-item>
                <el-descriptions-item label="审核时间">{{obj.user.verify_time}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance } from 'vue'
    import baiduMap from '@/components/baiduMap.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary:[],
        req:{
            "key": "",
            "type_user": 1,
            "type_identity": "",
            "verify": "",
            currentpage: 1,
            pagesize: 10,
            count: 0,
        },
        dialog: {
            show: false,
            title: '',
            verifyForm: {
                "verify": "",
                "verify_msg": "",
                "userid": ""
            }
        },
        user: {}
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/user/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.ary.map(e=>{
                    e.verifyText = proxy.$util.aryVal("verifyTypeAry", e.verify, 'text')
                    e.verifyType = proxy.$util.aryVal("verifyTypeAry", e.verify, 'colorType')
                })
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
    init()
    
    const showVerify=async(row)=>{
        obj.user = await get(row.userid)
        obj.user.addressInfo = {
            address: obj.user.address,
            longitude: obj.user.location?(obj.user.location.split(',')[0]||''):'',
            latitude: obj.user.location?(obj.user.location.split(',')[1]||''):'',
        }
        obj.user = {
            ...row,
            ...obj.user,
            business_license: `${proxy.$setting.globalUrl.fileurl}/user/${obj.user.business_license}`,
            business_card: `${proxy.$setting.globalUrl.fileurl}/user/${obj.user.business_card}`,
            business_other: `${proxy.$setting.globalUrl.fileurl}/user/${obj.user.business_other}`,
        }
        obj.dialog = {
            show: true,
            title: `审核用户`,
            verifyForm: {
                "verify": "",
                "verify_msg": "",
                "userid": row.userid
            }
        }
    }
    
    let get = (userid) => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/user/get',
                data: { userid: userid },
                bfLoading: true
            }).then(d => {
                resolve(d.msg)
            }).catch(e => {
                reject(e)
            })
        })
    }

    const submitVerify=()=>{
        proxy.$refs['verifyForm'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: '/manager/user/verify',
                    data: obj.dialog.verifyForm,
                    bfLoading: true
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin("审核成功", 'success')
                        obj.dialog.show = false
                        init()
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }
        })
    }
</script>

<style scoped>
</style>